<textarea id="{$data['name']}" type="editor" name="{$data['name']}" class="field-{$data['name']}">{$data['value']}</textarea>
<script src="__PUBLIC_PACK__/jquery/jquery-3.x.min.js?v={:config('tinymce.version')}"></script>
<script src="__PUBLIC_STATIC__/p_tinymce/default/js/tinymce.min.js?v={:config('tinymce.version')}"></script>
<script src="__PUBLIC_STATIC__/p_tinymce/default/js/prism.js?v={:config('tinymce.version')}"></script>
<link href="__PUBLIC_STATIC__/p_tinymce/default/css/prism.css" rel="stylesheet" />
{php}
$language = config("tinymce.language");
$plugins = config("tinymce.plugins");
$toolbar = config("tinymce.toolbar");
$fontsize = config("tinymce.fontsize");
$fontfamily = config("tinymce.fontfamily");
$menu = config("tinymce.menu");
$wh = config("tinymce.wh");
if(isset($data['config'])){
    $language = $data['config']['language'] ?? $language;
    $plugins = $data['config']['plugins'] ?? $plugins;
    $toolbar = $data['config']['toolbar'] ?? $toolbar;
    $fontsize = $data['config']['fontsize'] ?? $fontsize;
    $fontfamily = $data['config']['fontfamily'] ?? $fontfamily;
    $menu = $data['config']['menu'] ?? $menu;
    $menu = $menu == 0 || $menu === false ? false : true;
    $wh = $data['config']['wh'] ?? $wh;
}
if($wh && strpos($wh, 'x') !== false){
    $wh = explode('x', $wh);
}
{/php}
<script>
    $(function(){
            function image_upload_handler (blobInfo, success, failure, progress) {
                var xhr, formData;
                xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
                xhr.open('POST', '{:url("system/annex/upload?temp=0&group=".$data["group"])}');
                xhr.upload.onprogress = function (e) {
                    progress(e.loaded / e.total * 100);
                };
                xhr.onload = function() {
                    var json;
                    if (xhr.status === 403) {
                        failure('HTTP Error: ' + xhr.status, { remove: true });
                        return;
                    }
                    if (xhr.status < 200 || xhr.status >= 300) {
                        failure('HTTP Error: ' + xhr.status);
                        return;
                    }
                    json = JSON.parse(xhr.responseText);
                    if (!json || !json.code) {
                        failure('Invalid JSON: ' + xhr.responseText);
                        return;
                    }
                    success(json.data.file);
                };
                xhr.onerror = function () {
                    failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
                };
                formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
                xhr.send(formData);
            };
            tinymce.init({
                selector: '#{$data["name"]}',
                language:'{:$language}',
                menubar: '{:$menu}',
                plugins: '{:$plugins}',
                toolbar: '{:$toolbar}',
                fontsize_formats: '{:$fontsize}',
                font_formats: '{:$fontfamily}',
                width:'{if $wh}{$wh[0]}{/if}',
                height:'{if $wh}{$wh[1]}{/if}',
                codesample_global_prismjs: true,
                images_upload_handler: image_upload_handler,
                setup: function(editor) {
                    editor.on('NodeChange', function(data) {
                        $('#{$data["name"]}').val(editor.getContent());
                    });
                },
            });

         })
</script>